<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <input type="text" id="txt">
    <button id="btn1">请求商品</button>
    <button id="btn2">请求品牌</button>
</body>
<script>
    // - 接口地址：http://icodeilife.club:3000/api/pro/search
    // - 请求方式：get
    // - 请求数据：sKey，要搜索的关键字
    // - 响应数据类型：json
    // - 响应数据内容：{"code": 200,"title": "请求成功","msg":[数据]}


    // - 接口地址：http://icodeilife.club:3000/api/pro/brand
    // - 请求方式：get
    // - 请求数据：kindKey，要请求的品牌的分类信息
    // - 响应数据类型：json
    // - 响应数据内容：{"code": 200,"title": "请求成功","msg":[数据]}


    const btn1 = document.getElementById("btn1");
    const btn2 = document.getElementById("btn2");
    const txt = document.getElementById("txt")

    btn1.onclick = function(){
        // ...
    }

    btn2.onclick = function(){
        ajax("get", "http://icodeilife.club:3000/api/pro/brand",res=>{
            console.log(res);
        },{
            kindKey:txt.value
        })
    }

    

    function ajax(type, url, cb, data){
        // 1. 解析数据：将对象数据，解析成key=value&key=value
        let str = "";
        for(let i in data){
            str += i + "=" + data[i] + "&";
        }
        // 2. 针对请求方式进行数据拼接
        url = url + "?" + str.slice(0, -1);

        // 3. 发起ajax请求
        const xhr = new XMLHttpRequest();
        xhr.open(type, url);
        xhr.send();
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                // 4. 请求成功，将数据以回调函数的形式，传到外部
                cb(xhr.responseText);
            }
        }
    }

    // 自定义函数封装的参数最好不要超过3个


    // 封装
        // 封装功能：函数
        // 封装数据：对象，数组

    
    // 对象的概念：数据的无序集合
    // 数组的概念：数据的有序集合



    // ajax2.0版规划
    // ajax({
    //     type:"get",
    //     url:"http://icodeilife.club:3000/api/pro/search",
    //     success:res=>{
    //         console.log(res);
    //     },
    //     error:err=>{
    //         console.log(res);
    //     },
    //     data:{
    //         sKey: txt.value
    //     },
    //     timeout: 1000
    // })


</script>
</html>